<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔鲜</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/index.js"></script>
</head>

<body>

    <!-- 头部 -->
    <div class="head">

        <!-- 顶部 -->
        <div class="banner">
            <ul>
                <li class="active">请先登录</li>
                <li>免费注册</li>
                <li>我的订单</li>
                <li>会员中心</li>
                <li>帮助中心</li>
                <li>在线客服</li>
                <li><i class="iconfont icon-mobile-phone"></i>手机版</li>
            </ul>
        </div>
    </div>


    <!-- 标题部分 -->
    <div class="title banner">
        <h1>小兔鲜儿</h1>
        <ul>
            <li>首页</li>
            <li class="active">生鲜</li>
            <li>美食</li>
            <li>餐厨</li>
            <li>电器</li>
            <li>居家</li>
            <li>洗护</li>
            <li>孕婴</li>
            <li>服装</li>
        </ul>

        <div class="search">
            <i class="iconfont icon-search"></i>
            <input type="text" placeholder="搜一搜">
        </div>

        <i class="iconfont icon-cart-full"></i>

    </div>

    <!-- 轮播图 -->
    <div class="swiper">
        <div class="banner">
            <ul>
                <li>
                    <dl>
                        <dt><a href="#">生鲜</a></dt>
                        <dd><a href="#">水果</a></dd>
                        <dd><a href="#">蔬菜</a></dd>
                    </dl>
                    <i class="iconfont icon-arrow-right-bold"></i>
                </li>
            </ul>

            <div class="float-point">
                <ul>
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>


    <!-- 新鲜好物 -->
    <div class="fresh banner">
        <div class="title">
            <div class="left">
                <h2>新鲜好物</h2>
                <p>新鲜出炉 品质靠谱</p>
            </div>
            <div class="right">
                <a href="">
                    <p>查看全部</p>
                    <i class="iconfont icon-arrow-right-bold"></i>
                </a>
            </div>
        </div>

        <div class="content">
            <ul>
                <li>
                    <div class="image">
                        <img src="./uploads/goods1.png" alt="">
                        <p class="desc">KN95级莫兰迪色防护口罩</p>
                        <p class="price">￥ 79</p>
                    </div>
                </li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <!-- 人气推荐 -->
    <div class="popular banner">
        <div class="title">
            <div class="left">
                <h2>人气推荐</h2>
                <p>人气爆款 不容错过</p>
            </div>
        </div>

        <div class="content">
            <ul>
                <li>
                    <div class="image">
                        <img src="./uploads/recommend1.png" alt="">
                        <p class="title">特惠推荐</p>
                        <p class="desc">我猜得到 你的需要</p>
                    </div>
                </li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <!-- 热门品牌 -->
    <div class="hot">
        <div class="banner">
            <div class="title">
                <div class="left">
                    <h2>热门品牌</h2>
                    <p>国际经典 品质认证</p>
                </div>

                <div class="right">
                    <i class="iconfont icon-arrow-left-bold"></i>
                    <i class="iconfont icon-arrow-right-bold active"></i>
                </div>
            </div>

            <div class="content">
                <ul>
                    <li>
                        <div class="image">
                            <img src="./uploads/hot1.png" alt="">
                        </div>
                    </li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- 生鲜 -->
    <div class="fresh-food banner">
        <div class="title">
            <div class="left">
                <h2>生鲜</h2>
            </div>

            <div class="tag">
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">蔬菜</a></li>
                    <li class="active"><a href="#">肉禽蛋</a></li>
                    <li><a href="#">水果</a></li>
                    <li><a href="#">海鲜</a></li>
                    <li><a href="#">零食</a></li>
                    <li><a href="#">饮料</a></li>
                </ul>
            </div>

            <div class="right">
                <a href="">
                    <p>查看全部</p>
                    <i class="iconfont icon-arrow-right-bold"></i>
                </a>
            </div>
        </div>

        <div class="content">
            <div class="left"></div>
            <div class="right">
                <ul>

                </ul>

            </div>
        </div>
    </div>


    <!-- 服饰 -->
    <div class="dress banner">
        <div class="title">
            <div class="left">
                <h2>服饰</h2>
            </div>

            <div class="tag">
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">女装</a></li>
                    <li class="active"><a href="#">奢侈品</a></li>
                    <li><a href="#">裤装</a></li>
                    <li><a href="#">衬衫</a></li>
                    <li><a href="#">T恤</a></li>
                    <li><a href="#">内衣</a></li>
                </ul>
            </div>

            <div class="right">
                <a href="">
                    <p>查看全部</p>
                    <i class="iconfont icon-arrow-right-bold"></i>
                </a>
            </div>
        </div>

        <div class="content">
            <div class="left"></div>
            <div class="right">
                <ul>

                </ul>

            </div>
        </div>
    </div>

    <!-- 餐厨 -->
    <div class="kitchen banner">
        <div class="title">
            <div class="left">
                <h2>餐厨</h2>
            </div>

            <div class="tag">
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">厨具</a></li>
                    <li><a href="#">水具</a></li>
                    <li><a href="#">灯具</a></li>
                    <li><a href="#">五金</a></li>
                    <li><a href="#">家装材料</a></li>
                    <li><a href="#">居家好物</a></li>
                </ul>
            </div>

            <div class="right">
                <a href="">
                    <p>查看全部</p>
                    <i class="iconfont icon-arrow-right-bold"></i>
                </a>
            </div>
        </div>

        <div class="content">
            <div class="left"></div>
            <div class="right">
                <ul>

                </ul>

            </div>
        </div>
    </div>


    <!-- 居家 -->
    <div class="home banner">
        <div class="title">
            <div class="left">
                <h2>居家</h2>
            </div>

            <div class="tag">
                <ul>
                    <li><a href="#">热门</a></li>
                    <li><a href="#">鲜花生活</a></li>
                    <li><a href="#">家纺</a></li>
                    <li><a href="#">创意礼品</a></li>
                    <li><a href="#">个性佩戴</a></li>
                    <li><a href="#">生活用品</a></li>
                </ul>
            </div>

            <div class="right">
                <a href="">
                    <p>查看全部</p>
                    <i class="iconfont icon-arrow-right-bold"></i>
                </a>
            </div>
        </div>

        <div class="content">
            <div class="left"></div>
            <div class="right">
                <ul>

                </ul>

            </div>
        </div>
    </div>

    <!-- 最近专题 -->
    <div class="new banner">
        <div class="title">
            <div class="left">
                <h2>最近专题</h2>
            </div>

            <div class="right">
                <a href="">
                    <p>查看全部</p>
                    <i class="iconfont icon-arrow-right-bold"></i>
                </a>
            </div>
        </div>

        <div class="content">
            <ul>
                <li>
                    <div class="image"><img src="./uploads/topic1.png" alt=""></div>
                    <div class="title">
                        <div class="top">吃这些美食才不算辜负自己</div>
                        <div class="end">餐厨器具洗护好物</div>
                    </div>
                    <div class="price">￥29.9起</div>

                    <div class="bottom">
                        <div class="left">
                            <p><i class="iconfont icon-favorites-fill"></i> 1220
                                <i class="iconfont icon-browse"></i> 1880</p>
                        </div>
                        <div class="right">
                            <p><i class="iconfont icon-comment"></i> 246</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="image"><img src="./uploads/topic2.png" alt=""></div>
                    <div class="title">
                        <div class="top">吃这些美食才不算辜负自己</div>
                        <div class="end">餐厨器具洗护好物</div>
                    </div>
                    <div class="price">￥29.9起</div>

                    <div class="bottom">
                        <div class="left">
                            <p><i class="iconfont icon-favorites-fill"></i> 1220
                                <i class="iconfont icon-browse"></i> 1880</p>
                        </div>
                        <div class="right">
                            <p><i class="iconfont icon-comment"></i> 246</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="image"><img src="./uploads/topic3.png" alt=""></div>
                    <div class="title">
                        <div class="top">吃这些美食才不算辜负自己</div>
                        <div class="end">餐厨器具洗护好物</div>
                    </div>
                    <div class="price">￥29.9起</div>

                    <div class="bottom">
                        <div class="left">
                            <p><i class="iconfont icon-favorites-fill"></i> 1220
                                <i class="iconfont icon-browse"></i> 1880</p>
                        </div>
                        <div class="right">
                            <p><i class="iconfont icon-comment"></i> 246</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>


    <!-- 底部 -->
    <div class="bottom">
        <div class="banner">
            <div class="tag">
                <ul>
                    <li>
                        <div class="pic"></div>
                        <h3>价格亲民</h3>
                    </li>
                    <li>
                        <div class="pic"></div>
                        <h3>物流快捷</h3>
                    </li>
                    <li>
                        <div class="pic"></div>
                        <h3>品质新鲜</h3>
                    </li>
                    <li>
                        <div class="pic"></div>
                        <h3>售后无忧</h3>
                    </li>
                </ul>
            </div>

            <div class="tip">
                <div class="tip-left">
                    <ul>
                        <li>
                            <dl>
                                <dt>购物指南</dt>
                                <dd>购物流程</dd>
                                <dd>支付方式</dd>
                                <dd>售后规则</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>购物指南</dt>
                                <dd>购物流程</dd>
                                <dd>支付方式</dd>
                                <dd>售后规则</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>购物指南</dt>
                                <dd>购物流程</dd>
                                <dd>支付方式</dd>
                                <dd>售后规则</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>购物指南</dt>
                                <dd>购物流程</dd>
                                <dd>支付方式</dd>
                                <dd>售后规则</dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt>购物指南</dt>
                                <dd>购物流程</dd>
                                <dd>支付方式</dd>
                                <dd>售后规则</dd>
                            </dl>
                        </li>
                    </ul>
                </div>

                <div class="tip-right">
                    <ul>
                        <li>
                            <img src="./images/wechat.png" alt="">
                            <p>微信公众号</p>
                        </li>
                        <li>
                            <img src="./images/app.png" alt="">
                            <p>APP下载二维码</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


</body>

</html>